<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>canvas 获取图像颜色</title>
        <style>
            body {
                transition: background ease 0.2s;
                text-align: center;
                padding: 0;
                margin: 0;
            }
            #cursor {
                width: 9px;
                height: 9px;
                position: absolute;
            }
            #cursor::before,
            #cursor::after {
                content: '';
                position: absolute;
                background-color: #000;
            }
            #cursor::before {
                left: 4px;
                top: 0;
                width: 1px;
                height: 9px;
            }
            #cursor::after {
                top: 4px;
                left: 0;
                width: 9px;
                height: 1px;
            }
        </style>
    </head>
    <body>
        <h2>点击图片任意位置</h2>
        <img id="img" src="../../../Microsoft edge 下载/01.jpg" alt="" />
        <h3 id="output"></h3>
        <script>
            window.addEventListener('load', function () {
                // 将 img 绘制在 canvas 中
                function draw(img) {
                    var style = window.getComputedStyle(img)
                    var width = parseInt(style.width, 10)
                    var height = parseInt(style.height, 10)
                    var canvas = document.createElement('canvas')
                    canvas.width = width
                    canvas.height = height
                    var ctx = canvas.getContext('2d')
                    ctx.drawImage(img, 0, 0)
                    // 获取坐标颜色
                    function getPixelColor(x, y) {
                        var imageData = ctx.getImageData(x, y, 1, 1)
                        var pixel = imageData.data
                        var r = pixel[0]
                        var g = pixel[1]
                        var b = pixel[2]
                        var a = pixel[3] / 255
                        a = Math.round(a * 100) / 100
                        var rHex = r.toString(16)
                        r < 16 && (rHex = '0' + rHex)
                        var gHex = g.toString(16)
                        g < 16 && (gHex = '0' + gHex)
                        var bHex = b.toString(16)
                        b < 16 && (bHex = '0' + bHex)
                        var rgbaColor = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')'
                        var rgbColor = 'rgb(' + r + ',' + g + ',' + b + ')'
                        var hexColor = '#' + rHex + gHex + bHex
                        return {
                            rgba: rgbaColor,
                            rgb: rgbColor,
                            hex: hexColor,
                            r: r,
                            g: g,
                            b: b,
                            a: a
                        }
                    }
                    return {
                        getColor: getPixelColor
                    }
                }
                // 点击位置绘制一个十字坐标
                function setCursor(x, y) {
                    // ;<div id="cursor" class="cursor"></div>
                    var cursor = document.getElementById('cursor')
                    if (!cursor) {
                        cursor = document.createElement('div')
                        cursor.id = 'cursor'
                        document.body.appendChild(cursor)
                    }
                    cursor.style.left = x - 4 + 'px'
                    cursor.style.top = y - 4 + 'px'
                }
                var img = document.getElementById('img')
                var output = document.getElementById('output')
                var canvas = draw(img)
                img.addEventListener('click', function (e) {
                    var x = e.offsetX
                    var y = e.offsetY
                    setCursor(e.pageX, e.pageY)
                    var color = canvas.getColor(x, y).rgba
                    document.body.style.background = color
                    output.innerHTML = '坐标点颜色：' + color
                })
            })
        </script>
    </body>
</html>
